<template>
	<view>
		<view class="flexbc msgTopLink ">
			<view class="toplink" @click="$common.goNavPage('/myPages/pages/fangke')">
				<view class="toplinkIcon articon">
					<fui-badge :value="receiveInfo.UserCount.renqix" type="danger" scaleRatio="0.8" :absolute="true"
						right="-8rpx" top="-14rpx"></fui-badge>
				</view>
				<view>赞与访客</view>
			</view>
			<view class="toplink" @click="$common.goNavPage('/messagePages/pages/systemMessage')">
				<view class="toplinkIcon msgicon">
					<fui-badge :value="receiveInfo.SystemMsgCount" type="danger" scaleRatio="0.8" :absolute="true"
						right="-8rpx" top="-14rpx"></fui-badge>
				</view>
				<view>系统消息</view>
			</view>
			<view class="toplink" @click="$common.goNavPage('/myPages/pages/signUpReservationorder')">
				<view class="toplinkIcon ordericon">
					<fui-badge :value="receiveInfo.MyGetReservationOrderSignUp" type="danger" scaleRatio="0.8"
						:absolute="true" right="-8rpx" top="-14rpx"></fui-badge>
				</view>
				<view>收到约单</view>
			</view>
			<view class="toplink" @click="$common.goNavPage('/myPages/pages/signUpNotice')">
				<view class="toplinkIcon worksicon">
					<fui-badge :value="receiveInfo.MyGetNoticeSignUp" type="danger" scaleRatio="0.8" :absolute="true"
						right="-8rpx" top="-14rpx"></fui-badge>
				</view>
				<view>收到报名</view>
			</view>
		</view>

		<view class="messageListBox">
			<view v-for="(item,index) in IndexList" :key="index" @click="gotoMsgPage(item.MsgGroupID)">
				<view v-if="item.MsgGroupType !== 0" class="messageItem flexbc">
					<view class="msgHead">
						<fui-badge v-if="item.MsgGroupType === 1 && item.noReadCount > 0" type="danger" scaleRatio="0.8"
							:absolute="true" right="-8rpx" top="-14rpx" dot></fui-badge>
						<fui-badge v-if="item.MsgGroupType === 0 && item.noReadCount > 0" type="danger" scaleRatio="0.8"
							:absolute="true" right="-8rpx" top="-14rpx" :value="item.noReadCount" max="99"></fui-badge>
						<image :src="item.MsgGroupIcon"></image>

					</view>
					<view class="msgText">
						<view class="msgName">{{ item.MsgGroupName }}</view>
						<view class="lastMsg" v-if="item.MsgList">{{ item.MsgList.NickName }}:
							{{ JSON.parse(item.MsgList.MsgContent).inputMsg || formatContent }}
						</view>
						<view v-else>
							<text v-if="item.MsgGroupNotice !== null">{{ item.MsgGroupNotice }}</text>
						</view>
					</view>
					<view class="msgTime">
						<text v-if="item.MsgList">{{ item.MsgList.addTime.slice(0, 10) }}</text>
					</view>
				</view>
				<view v-else class="messageItem flexbc">
					<view class="msgHead" style="position: relative;">
						<fui-badge v-if="item.MsgGroupType === 1 && item.noReadCount > 0" type="danger" scaleRatio="0.8"
							:absolute="true" right="-8rpx" top="-14rpx" dot></fui-badge>
						<fui-badge v-if="item.MsgGroupType === 0 && item.noReadCount > 0" type="danger" scaleRatio="0.8"
							:absolute="true" right="-8rpx" top="-14rpx" :value="item.noReadCount" max="99"></fui-badge>
						<image :src="item.MemberList[0].WxHeadPic"></image>


					</view>
					<view class="msgText">
						<view class="msgName">{{ item.MemberList[0].MsgGroupMemberName }}</view>
						<view class="lastMsg" v-if="item.MsgList">{{ item.MsgList.NickName }}:
							{{ JSON.parse(item.MsgList.MsgContent).inputMsg || formatContent }}
						</view>
					</view>
					<view class="msgTime">
						<view v-if="item.MsgList">{{ item.MsgList.addTime.slice(0, 10) }}</view>
						<view style="padding:4rpx;"></view>
						<view style="color:darkseagreen;font-size: 20rpx;text-align: right;"
							v-if="item.MemberList[0].isOnline == 1">当前在线</view>
						<view style="color:#CCC;font-size: 20rpx;text-align: right;"
							v-if="item.MemberList[0].isOnline == 0">
							{{ $common.timeDiff(item.MemberList[0].onlineTime,new Date()) }}来过
						</view>
					</view>
				</view>
			</view>
		</view>
		<fui-modal :buttons="buttons" width="600" :descr="descr" :show="isVipCheck" @click="HandleCheckVip">
			<!-- <fui-icon name="checkbox-fill" :size="108" color="#09BE4F"></fui-icon> -->
			<!-- <text class="fui-title">购买成功</text> -->
			<!-- <text class="fui-descr">VIP聊天室仅VIP用户或有“官方认证”【颜值美女】标识的艺人可进，\r\n是否加入？</text> -->
			<!-- <fui-button text="升级VIP" width="240rpx" height="72rpx" :size="28" radius="36rpx" background="#FFB703"
				borderWidth="0" :margin="['0','0','24rpx']" @click="onCancel">
			</fui-button> -->
			<view class="fui-icon__close" @tap="onCancel">
				<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
			</view>
		</fui-modal>
	</view>
</template>

<script>
	import {
		connectSocketInit,
		sendMessage
	} from "@/script/websocket.js";
	export default {
		filters: {
			formatContent(msg) {
				if (msg) {
					return msg.substring(0, 14) + '..'
				}
			}
		},
		data() {
			return {
				isLogin: false,
				IndexList: [],
				LoginInfo: {
					isLogin: 0,
					UserInfo: {}
				},
				isVipCheck: false,
				buttons: [{
						//按钮文本，必选
						text: '申请【颜值美女】',
						//按钮文本颜色，可选
						color: '#000',
						//按钮背景颜色，可选
						background: '#FFDD00',
						//是否为镂空按钮，即背景色为透明，可选
						plain: false
					},
					{
						//按钮文本，必选
						text: '开通VIP会员',
						//按钮文本颜色，可选
						color: '#fff',
						//按钮背景颜色，可选
						background: '#FF6600',
						//是否为镂空按钮，即背景色为透明，可选
						plain: false
					}
				],
				descr: 'VIP聊天室仅VIP用户\r\n或有【颜值美女】标识的艺人可进',
				receiveInfo: {}
			};
		},
		onShow() {
			if (uni.getStorageSync("isLogin")) {
				// console.log('getStorageSyncTrue', uni.getStorageSync("isLogin"))
				this.LoginInfo = uni.getStorageSync("isLogin");
				this.onGetUserLogin();
			} else {
				// console.log('getStorageSyncFalse', uni.getStorageSync("isLogin"))
				this.isLogin = false
				uni.navigateTo({
					url: '/pages/login/weixinlogin'
				})
			}

			this.onGetList();
		},
		onPullDownRefresh() {
			this.onGetList();
			// 停止当前页面下拉刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			onGetUserLogin() {
				this.$httpost('/Login/isLogin', {}).then(res => {
					// console.log('isLogin', res)
					if (res.code == 200) {
						this.LoginInfo = res.data.LoginInfo
						if (this.LoginInfo.UserID > 0) {
							this.isLogin = true
							let LoginInfo = uni.getStorageSync("isLogin");

							uni.onSocketOpen((res) => {
								// this.isSocketOpen=true
								// console.log('监听socket重新打开！', res);
							})

							sendMessage('joinGroup', 0, LoginInfo.UserID, LoginInfo.LoginName + '进入列表页')
						} else {
							this.isLogin = false
							uni.navigateTo({
								url: '/pages/login/weixinlogin'
							})
						}
					}
				});
			},
			onGetList() {
				this.$httpost('/Message/index', {}).then(res => {
					// console.log('indexData', res);
					if (res.code == 200) {
						this.IndexList = res.data.MessageList;
						this.LoginInfo.UserInfo = res.data.UserInfo;
						this.receiveInfo = res.data.TopCount

						if (res.data.NewMsg == 0) {
							uni.hideTabBarRedDot({
								index: 3
							});
						} else {
							uni.showTabBarRedDot({
								index: 3
							})
						}
					}

				});
			},
			gotoMsgPage(MsgGroupID) {
				// console.log(MsgGroupID);

				if (MsgGroupID == 3) {
					if (this.LoginInfo.UserLevelID !== 2) {
						if (this.LoginInfo.UserInfo.BeautifulWomen == 0) {
							this.isVipCheck = true
							// uni.showModal({
							// 	content: 'VIP聊天室仅VIP用户或有“官方认证”【颜值美女】标识的艺人可进，\r\n是否加入？',
							// 	cancelText: '暂不升级',
							// 	confirmText: '升级VIP',
							// 	success: (ures) => {
							// 		if (ures.confirm) {
							// 			// console.log('执行加入')
							// 			uni.navigateTo({
							// 				url: '/myPages/pages/openVip'
							// 			})
							// 		} else if (ures.cancel) {
							// 			// console.log('不加入')
							// 		}
							// 	}
							// })

							return false;
						}
					}
				}

				let _that = this;
				this.$httpost('/Message/checkGroupAuth', {
					MsgGroupID: MsgGroupID
				}).then(res => {
					// console.log('checkGroupAuth', res);
					if (res.code == 200) {
						if (res.data.GroupMember !== null) {
							uni.navigateTo({
								url: '/messagePages/pages/msgpage?MsgGroupID=' + MsgGroupID
							})
						} else {
							uni.showModal({
								content: '您还没有加入会话群组，\r\n是否加入？',
								success: (ures) => {
									if (ures.confirm) {
										// console.log('执行加入')
										_that.JoinGroup(MsgGroupID);
									} else if (ures.cancel) {
										// console.log('不加入')
									}
								}
							})
						}
					}
				});


			},
			HandleCheckVip(e) {
				// console.log(e)

				if (e.index == 0) {
					this.$common.goNavPage('/pages/index/advert/advert?adid=1')
				} else {
					uni.navigateTo({
						url: '/myPages/pages/openVip'
					})
				}
			},
			onCancel() {
				this.isVipCheck = false
			},
			JoinGroup(MsgGroupID) {
				this.$httpost('/Message/joinGroup', {
					MsgGroupID: MsgGroupID
				}).then(res => {
					// console.log('joinGroup', res);
					if (res.code == 200) {
						uni.navigateTo({
							url: '/messagePages/pages/msgpage?MsgGroupID=' + MsgGroupID
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.msgTopLink {
		padding: 30rpx 10rpx;
		background-color: #FFF;
		justify-content: space-between;
	}

	.toplink {
		width: 20vw;
		height: 120rpx;
		text-align: center;
		font-size: 24rpx;
		letter-spacing: 2rpx;
	}

	.toplinkIcon {
		margin: auto;
		width: 90rpx;
		height: 90rpx;
		background-color: #CCC;
		border-radius: 80rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.msgicon {
		background-color: #00cbff;
		background-image: url('@/static/icon/msg.png');
		background-size: 50%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.articon {
		background-color: #FFDD00;
		background-image: url('@/static/icon/arter.png');
		background-size: 60%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.ordericon {
		background-color: #FFAC87;
		background-image: url('@/static/icon/order.png');
		background-size: 55%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.worksicon {
		background-color: #97f200;
		background-image: url('@/static/icon/task.png');
		background-size: 60%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.messageListBox {
		margin-top: 20rpx;
		background-color: #FFF;
		;
	}

	.messageItem {
		padding: 30rpx;
		border-bottom: 1rpx solid #f7f7f7
	}

	.msgHead {
		width: 90rpx;
		height: 90rpx;
		background-color: #CCC;
		border-radius: 90rpx;
	}

	.msgHead image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 90rpx;
	}

	.msgText {
		margin-left: 20rpx;
		width: 60vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 4rpx 0;

	}

	.msgName {
		font-size: 28rpx;
	}

	.lastMsg {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #aeaeae;
		font-size: 24rpx;
	}

	.msgTime {
		white-space: nowrap;
		width: 150rpx;
		color: #999;
		font-size: 24rpx;
		text-align: right;
	}

	.fui-title {
		font-size: 32rpx;
		padding-top: 24rpx;
	}

	.fui-descr {
		font-size: 24rpx;
		color: #B2B2B2;
		padding-top: 12rpx;
		padding-bottom: 48rpx;
	}

	.fui-icon__close {
		position: absolute;
		right: 24rpx;
		top: 20rpx;
	}

	.fui-badge__wrap.data-v-3cb5ff68 {
		height: 30rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		line-height: 30rpx;
		border-radius: 100px;
		min-width: 30rpx !important;
		display: flex;
		box-sizing: border-box;
		white-space: nowrap;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 10;
	}
</style>